---
title: Teks
image: /images/user-guide/notes/notes_header.png
---

<Frame>
  <img src="/images/user-guide/notes/notes_header.png" alt="Header" />
</Frame>

## Teks Invoer

Laat gebruikers toe om teks in te voer en te redigeer.

<Tabs>

<Tab title="Usage">

```jsx
import { RecoilRoot } from "recoil";
import { TextInput } from "@/ui/input/components/TextInput";

export const MyComponent = () => {
  const handleChange = (text) => {
    console.log("Input changed:", text);
  };

  const handleKeyDown = (event) => {
    console.log("Key pressed:", event.key);
  };

  return (
    <RecoilRoot>
      <TextInput
        className
        label="Username"
        onChange={handleChange}
        fullWidth={false}
        disableHotkeys={false}
        error="Invalid username"
        onKeyDown={handleKeyDown}
        RightIcon={null}
      />
    </RecoilRoot>
  );
};

```

</Tab>

<Tab title="Props">

| Eienskappe                    | Tipe          | Beskrywing                                                                                                                                               |
| ----------------------------- | ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
| klasNaam                      | string        | Opsionele naam vir bykomende styl                                                                                                                        |
| etiket                        | string        | Verteenwoordig die etiket vir die invoer                                                                                                                 |
| opVerandering                 | funksie       | Die funksie wat geroep word wanneer die invoerwaarde verander                                                                                            |
| volleBreedte                  | booleaanse    | Dui aan of die invoer 100% van die breedte moet beslaan                                                                                                  |
| skakelSleutelwoordkortpaaieAf | booleaanse    | Dui aan of sleutelwoordkortpaaie vir die invoer geaktiveer is                                                                                            |
| fout                          | string        | Verteenwoordig die foutboodskap wat vertoon moet word. Wanneer voorsien, voeg dit ook 'n ikoonfout aan die regterkant van die invoer toe |
| onKeyDown                     | funksie       | Geroep wanneer 'n sleutel afgedruk word terwyl die invoerveld gefokus is. Ontvang 'n `React.KeyboardEvent` as 'n argument                |
| RegterIkoon                   | IkonKomponent | 'n Opsionele ikoon komponent getoon aan die regterkant van die invoer                                                                                    |

Die komponent aanvaar ook ander HTML invoerelement eienskappe.

</Tab>

</Tabs>

## Autosize Text Input

Teks invoer komponent wat outomaties sy hoogte aanpas gebaseer op die inhoud.

<Tabs>

<Tab title="Usage">

```jsx
import { RecoilRoot } from "recoil";
import { AutosizeTextInput } from "@/ui/input/components/AutosizeTextInput";

export const MyComponent = () => {
  return (
    <RecoilRoot>
      <AutosizeTextInput
        onValidate={() => console.log("onValidate function fired")}
        minRows={1}
        placeholder="Write a comment"
        onFocus={() => console.log("onFocus function fired")}
        variant="icon"
        buttonTitle
        value="Task: "
      />
    </RecoilRoot>
  );
};
```

</Tab>

<Tab title="Props">

| Eienskappe   | Tipe    | Beskrywing                                                                                                     |
| ------------ | ------- | -------------------------------------------------------------------------------------------------------------- |
| byValideer   | funksie | Die terugvoerfunksie wat jy wil aktiveer wanneer die gebruiker die invoer valideer                             |
| minRye       | nommer  | Die minimum aantal rye vir die teksarea                                                                        |
| placeholder  | string  | The placeholder text you want to display when the text area is empty                                           |
| byFokus      | funksie | Die terugvoerfunksie wat jy wil aktiveer wanneer die teksarea fokus kry                                        |
| variant      | string  | Die variant van die invoer. Opsies sluit in: `standaard`, `ikoon` en `knoppie` |
| knoppieTitel | string  | Die titel vir die knoppie (slegs van toepassing op die knoppie variant)                     |
| waarde       | string  | Die aanvanklike waarde vir die teksarea                                                                        |

</Tab>

</Tabs>

## Text Area

Stel jou in staat om multi-lyn teks in te voer.

<Tabs>
<Tab title="Usage">

```jsx
import { TextArea } from "@/ui/input/components/TextArea";

export const MyComponent = () => {
  return (
    <TextArea
    disabled={false}
    minRows={4}
    onChange={()=>console.log('On change function fired')}
    placeholder="Enter text here"
    value=""
    />
  );
};
```

</Tab>

<Tab title="Props">

| Eienskappe    | Tipe       | Beskrywing                                                                   |
| ------------- | ---------- | ---------------------------------------------------------------------------- |
| gedeaktiveer  | booleaanse | Indicates whether the text area is disabled                                  |
| minRye        | nommer     | Minimum aantal sigbare rye vir die teksarea.                 |
| opVerandering | funksie    | Terugbel-funksie wat geaktiveer word wanneer die teksarea se inhoud verander |
| placeholder   | string     | Plekhouer-teks wat gewys word wanneer die teksarea leeg is                   |
| waarde        | string     | Die huidige waarde van die teksarea                                          |

</Tab>
</Tabs>
